<template>
  <div class="canvas-container">
    <h3>canvas下载pdf</h3>
    <div class="btn">
      <el-button
        type="primary"
        @click="downloadPDF('canvas-download', 'PDF报告')"
        >下载pdf</el-button
      >
    </div>
    <div class="download-content" id="canvas-download">
      <img src="@/assets/logo.png" alt="" />
      <hr />
      nihao
      <img src="@/assets/logo.png" alt="" /> <br />
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub>123344</sub>
      <html>
        《哈哈哈
      </html>
      <hr />
      nihao
      <img src="@/assets/logo.png" alt="" /> <br />
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub>123344</sub>
      <html>
        《哈哈哈
      </html>
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub style="font-size: 30px">123344</sub>
      <h1>1</h1>
      <h2>2</h2>
      <h3>3</h3>
      <h4>4</h4>
      <h5>5</h5>
      <html>
        《哈哈哈
      </html>
      <hr />
      nihao
      <img src="@/assets/logo.png" alt="" /> <br />
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub>123344</sub>
      <html>
        《哈哈哈
      </html>
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub>123344</sub>
      <html>
        《哈哈哈
      </html>
      <hr />
      nihao
      <img src="@/assets/logo.png" alt="" /> <br />
      cs 121<img src="@/assets/logo.png" alt="" /> <br />314141414
      <img src="@/assets/logo.png" alt="" /> <br />
      <sub>123344</sub>
      <html>
        《哈哈哈
      </html>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  name: "canvas-container",
  data() {
    return {};
  },
  methods: {
    downloadPDF(id, title) {
      const element = document.getElementById(`${id}`);
      const opts = {
        scale: 6, // 缩放比例，提高生成图片清晰度，不推荐太高
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片已经加载完成
        logging: true, // 日志开关，发布的时候记得改成 false
      };

      return html2canvas(element, opts).then((canvas) => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]
        const imgWidth = 595.28;
        const imgHeight = (592.28 / contentWidth) * contentHeight;
        const pageData = canvas.toDataURL("image/jpeg", 1.0);
        // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
        const PDF = new JsPDF("", "pt", "a4");
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
          // PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);

          var a4Width = 555.28; // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40 20+20=40（哈哈两边哦)
          // var a4Height = 801.89; // 原A4高   841 因为要设置边距 20 ,这里要减掉 40
          // 就是在这里设置两边边距 20 20
          PDF.addImage(
            pageData,
            "JPEG",
            20,
            20,
            a4Width,
            (a4Width / canvas.width) * leftHeight
          );
        } else {
          // 超过一页时，分页打印（每页高度841.89）
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + ".pdf");
      });
    },
  },
};
</script>
<style>
.download-content {
  padding: 40px;
}
</style>
